<!DOCTYPE html>
<html>
<head>
  <title>随机点名器</title>
  <style>
    .result {
      margin-top: 20px;
    }
    .contain{
        width: 400px;
        height: 300px;
        background-color: skyblue;
        margin: 0 auto;
    }
    h1{
        text-align: center;
    }
    .btn{
        width: 100px;
        height: 40px;
        margin-top: 80px;
        margin-left: 150px;
        border-radius: 5px;
        background-color: skyblue;
    }
    .result{
        text-align: center;
        margin-top: 80px;
    }
  </style>
</head>
<body>
  <div class="contain">
    <h1>随机点名器</h1>
    <div class="result">谁是主角</div>
    <button onclick="toggleRandomCall()" class="btn">开始随机点名</button>

  </div>

  <script>
    let list = ['Alice', 'Bob', 'Charlie', 'David', 'Emily', 'Frank'];
    let timer;

    let btn = document.querySelector('.btn')
    let result = document.querySelector('.result')
    btn.addEventListener('click', ()=>{
        if(timer){
            clearInterval(timer)
            timer = null
            btn.textContent = '开始随机点名'
        }else{
            timer = setInterval(()=>{
                let randomIndex = Math.floor(Math.random() * list.length)
                let randomValue = list[randomIndex];
                result.textContent = '@' + randomValue
            },100)
            btn.textContent = '停止随机点名'
        }
    })


  </script>
</body>
</html>